<template>
    <div class="login_container">
        <div class="login_box">
            <!--        头像区域-->
            <div class="avatar_box">
                <img src="../assets/logo.png">
            </div>

            <!--        表单区域-->
            <el-form :model="loginForm" ref="loginFormRef" :rules="loginFormRules" label-width="0px" class="login_form">

                <!--            用户名-->
                <el-form-item prop="username">
                    <el-input v-model="loginForm.username" prefix-icon="iconfont icon-user"></el-input>
                </el-form-item>

                <!--        密码-->
                <el-form-item prop="password">
                    <el-input v-model="loginForm.password" prefix-icon="iconfont icon-3702mima"
                              type="password"></el-input>
                </el-form-item>

                <!--            按钮-->
                <el-form-item class="btns">
                    <el-button type="primary" @click="login">登陆</el-button>
                    <el-button type="info" @click="resetLoginForm">重置</el-button>
                </el-form-item>


            </el-form>
        </div>

    </div>
</template>

<script>
    export default {
        name: "Login",
        data() {
            return {
                loginForm: {
                    username: '',
                    password: ''
                },

                //表单验证规则对象
                loginFormRules: {
                    //    验证用户名是否合法
                    username: [
                        {required: true, message: "请输入登录名称", trigger: "blur"},//blur是当光标离开的时候触发验证
                        {min: 3, max: 10, message: "长度在3到10个字符", trigger: "blur"}
                    ],

                    //    验证密码是否合法
                    password: [
                        {required: true, message: '请输入登录密码', trigger: 'blur'},
                        {min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur'}
                    ]
                }
            }
        },

        methods: {
            resetLoginForm() {
                this.$refs.loginFormRef.resetFields();
            },
            login() {
                //这里如果不懂就看这个视频https://www.bilibili.com/video/BV1E7411c7M8?p=22
                //登陆前的验证
                this.$refs.loginFormRef.validate(async (valid) => {
                    if (!valid) return;
                    const {data: res} = await this.$http.post("login", this.loginForm);
                    //上面代码返回一个json对象，date是其中一个属性
                    if (res.meta.status !== 200) return this.$message.error("登陆失败");
                    this.$message.success("登陆成功");
                    //设置copkie、session
                    window.sessionStorage.setItem('token', res.data.token)
                    // 2. 通过编程式导航跳转到后台主页，路由地址是 /home
                    this.$router.push('/home')


                });
            }


        }
    }
</script>

<!--支持less语法格式-->
<!--scoped的意思是下面的样式只在当前组件生效-->
<style lang="less" scoped>
    .login_container {
        background-color: #5a74e5;
        height: 100%;
    }

    .login_box {
        width: 450px;
        height: 300px;
        background-color: azure;

        /*    圆角*/
        border-radius: 3px;

        /*    position:absolute主要是为了方便left和top的设置*/
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);

        .avatar_box {
            height: 130px;
            width: 130px;
            /*solid的意思应该是虚线*/
            border: 1px solid #dde5de;
            /*50%的圆角*/
            border-radius: 50%;
            /*边框和图片的距离*/
            padding: 10px;

            /*四个参数分别为引用距离图片左边的距离，与顶部的距离，阴影的宽度*/
            box-shadow: 0 0 10px #dde5de;

            background-color: #fff;

            position: absolute;
            left: 50%;
            transform: translate(-50%, -50%);
            /*下面的意思是宽高都是这块区域的50%*/

            img {
                width: 100%;
                height: 100%;
                border-radius: 50%;
                background-color: #eee;
            }
        }


    }

    /*右对齐*/
    .btns {
        display: flex;
        justify-content: flex-end;
    }

    /*与底部对齐*/
    .login_form {
        position: absolute;
        bottom: 0;
        width: 100%;
        /*两个数字分别为距离下边与距离左边的距离*/
        padding: 0 50px;

        /*下面的语句是让这个区域左右对齐*/
        box-sizing: border-box;
    }
</style>
